<template>
  <el-descriptions
      title="用户信息"
      direction="vertical"
      border
      style="margin-top: 20px"
  >
    <el-descriptions-item label="用户ID">{{ userInfo.userId }}</el-descriptions-item>
    <el-descriptions-item label="用户名">{{ userInfo.userName }}</el-descriptions-item>
    <el-descriptions-item label="电话号码">{{ userInfo.phone }}</el-descriptions-item>
    <el-descriptions-item label="详细地址">
      {{ userInfo.address }}
    </el-descriptions-item>
    <el-descriptions-item label="操作">
      <el-button type="primary" @click="router.push('/')">回到首页</el-button>
    </el-descriptions-item>
  </el-descriptions>

</template>
<script setup>
import {onMounted, ref} from 'vue';
import {useTokenStore} from "@/store/tokenStore.js";
import {getUserInfo} from "@/api/user.js";
import router from "@/router/index.js";

const userInfo = ref({
      userId: null,
      userName: "",
      phone: "",
      address: ""
    }
)
onMounted(() => {
  if (useTokenStore().token !== '') {
    getUserInfoFirstPage()
  }
});
const getUserInfoFirstPage = async () => {
  userInfo.value = await getUserInfo()
}

</script>

<style scoped>

</style>